<template>
  <div id="login">
    <div class="content">
      <!-- 左边的登录输入 -->
      <div class="login_left">
        <!-- 介绍 -->
        <div class="logo">
          <h3>Hello</h3>
          <h1>VUE3 SHPO DEMO ! Node</h1>
          <h2>Tsix2022</h2>
        </div>
        <!-- 表单 -->
        <div class="from">
          <input placeholder="please enter your username"
                 v-model="account.username" />
          <input placeholder="please enter your password"
                 v-model="account.password" />
          <!-- 登录按钮 -->
          <button class="btn"
                  @click="submitForm">登录</button>
          <!--  -->
          <div class="control">
            <div class="info">重置密码</div>
            <div class="info"
                 @click="reguser">注册账号</div>
          </div>
        </div>

      </div>
      <!-- 右边的lanse背景 -->
      <div class="bg_right">
        <!-- 4分之一个圆 -->
        <div class="circle">
          Hello World !
        </div>
        <!-- 有一个直角的圆 -->
        <div class="box1">
          <div class="straight_circle"></div>
        </div>
      </div>
      <!-- 中间的窗口 -->
      <div class="window">
        <div class="title">
          > console.log("Hello World !")
        </div>
        <pre v-highlight><code v-html="scriptText" class="javascript"></code></pre>

        <!-- 旁边的小窗口 -->
        <div class="small_window">

        </div>
      </div>
      <!-- 四个角上的图形 -->
      <!-- 左上 1/4圆 -->
      <div class="circle left_top">
      </div>
      <!-- 右上 半圆 -->
      <div class="left_top"></div>
      <!-- 右下 半椭圆-->
      <div class="right_top"></div>
      <!-- 右下 三角形 -->
      <div class="left_bottom"></div>
      <!-- 左下正方形 -->
      <div class="right_bottom"></div>
    </div>
    <!-- 注册新用户的弹框 -->
    <el-dialog v-model="dialogTableVisible">

      <div class="conbox">
        <div class="dia_left">
          <!-- <h1>新用户注册</h1> -->
          <el-form ref="ruleFormRef"
                   :model="ruleForm"
                   :rules="rules"
                   label-width="80px"
                   class="demo-ruleForm"
                   :size="formSize">
            <el-form-item label="账户名:"
                          prop="username">
              <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码:"
                          prop="password">
              <el-input v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item label="邮箱:"
                          prop="email">
              <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item label="昵称:"
                          prop="nickname">
              <el-input v-model="ruleForm.nickname"></el-input>
            </el-form-item>
            <button>注册</button>
          </el-form>

        </div>
        <div class="dia_right">
          <pre><h1>Welcome to
    VUE3_SHOP_DEMO</h1></pre>
          <!-- 四个圆圈 -->
          <div class="circle_box">
            <div class="one_circle"></div>
            <div class="two_circle"></div>
            <div class="three_circle"></div>
            <div class="four_circle"></div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { login, reguser } from '@/api/login'
import AccountLogin from '@/components/Login/AccountLogin.vue'
import phoneLogin from '@/components/Login/PhoneLogin.vue'
export default defineComponent({
  setup() {
    components: {
      AccountLogin,
        phoneLogin
    }
    // 这个里面是代码模板显示出来的 高亮
    const scriptText = reactive(
      `import { defineComponent } from "vue";
      export default defineComponent({
        setup() {
          return { };
        },
      });`
    )
    const account = reactive({
      username: 'admin',
      password: '1234567'
    })
    // 登录操作
    const router = useRouter()
    const submitForm = () => {
      try {
        login(account).then(res => {
          if (res.status !== '0') return ElMessage({
            message: res.message,
            type: 'error',
          })
          // 获取到的token存到 localstorage
          localStorage.setItem('token', res.token)
          router.push('/main')
        })
      } catch (err) {
        console.log(err);
      }
    }
    // 表单的验证规则
    const rules = reactive({
      username: [{
        required: true,
        message: '请输入账号！',
        trigger: 'blur',
      },
      {
        min: 3,
        max: 10,
        message: '长度在3到10之间',
        trigger: 'blur',
      },],
      password: [{
        required: true,
        message: '请输入密码！',
        trigger: 'blur',
      },
      {
        min: 3,
        max: 10,
        message: '长度在3到10之间',
        trigger: 'blur',
      },]
    })
    const ruleForm = reactive({
    })
    // 注册新用户
    const dialogTableVisible = ref(false)
    const reguser = () => {
      dialogTableVisible.value = true
    }
    return {
      account,
      scriptText,
      submitForm,
      ruleForm,
      dialogTableVisible,
      rules,
      reguser
    }
  }
})
</script>

<style lang="less" scope>
.hljs {
  background-color: #f5f5f5 !important;
  font-family: Arial, Helvetica, sans-serif;
}
#login {
  .content {
    position: relative;
    margin: 10vh auto;
    width: 65vw;
    height: 75vh;
    background-color: #fff;
    border-radius: 2vh;
    display: flex;
    box-shadow: 1vh 1vh 2vh rgba(8, 0, 59, 0.7);
  }
  .login_left {
    padding-left: 7%;
    margin-top: 50px;
    width: 63%;
    .logo {
      color: #0c0a24;
    }
    .from {
      input {
        font-size: 0.5rem;
        width: 26vh;
        height: 5vh;
        margin-top: 1vh;
        border: none;
        outline: none;
        border-bottom: 1px solid #eee;
        display: block;
      }
      .btn {
        margin-top: 4vh;
        background-color: #3e50df;
        border: none;
        width: 26vh;
        height: 5vh;
        border-radius: 0.8vh;
        color: #fff;
      }

      .btn:hover {
        background-color: #120375;
      }

      .control {
        display: flex;
        .info {
          margin-top: 10px;
          font-size: 12px;
          color: #888;
          margin-right: 12vh;
          cursor: pointer;
        }
      }
    }
  }
  .bg_right {
    width: 30%;
    overflow: hidden;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #96a6e5;
    .circle {
      width: 100%;
      height: 50%;
      background-color: #3d50e0;
      border-radius: 0 0 100% 0;
      color: #fff;
      text-align: center;
    }
    .box1 {
      width: 100%;
      height: 50%;
      background-color: #fff;
      .straight_circle {
        width: 100%;
        height: 100%;
        background-color: #f4433c;
        border-radius: 100% 100% 0 100%;
      }
    }
  }
  .window {
    position: relative;
    width: 22vw;
    height: 27vh;
    background-color: #f5f5f5;
    border-radius: 15px;
    position: absolute;
    top: 22vh;
    left: 38vw;
    .small_window {
      position: absolute;
      width: 19vh;
      height: 11vh;
      bottom: -7vh;
      left: -11vh;
      border-radius: 0.5vh;
      background-color: #eee;
      box-shadow: 1vh 1vh 3vh rgba(185, 194, 203, 0.6);
    }

    .title {
      width: 100%;
      height: 4vh;
      color: #ddd;
      line-height: 4vh;
      font-size: 14px;
      background-color: #08003b;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
    }
  }
  .left_top {
    position: absolute;
    z-index: -1;
    width: 25vh;
    height: 25vh;
    background-color: #ff5670;
    top: -5vh;
    left: -6vh;
    border-radius: 0 0 100% 0;
    transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    -moz-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    -o-transform: rotate(50deg);
  }

  .right_top {
    position: absolute;
    z-index: -1;
    width: 28vh;
    height: 14vh;
    top: -1vh;
    right: -11vh;
    border-radius: 14vh 14vh 0 0;
    background-color: #ffbc32;
    transform: rotate(148deg);
    -ms-transform: rotate(148deg);
    -moz-transform: rotate(148deg);
    -webkit-transform: rotate(148deg);
    -o-transform: rotate(148deg);
  }

  .left_bottom {
    position: absolute;
    bottom: -4vh;
    left: 3vw;
    width: 0;
    height: 0;
    border-left: 7vh solid transparent;
    border-right: 7vh solid transparent;
    border-bottom: 14vh solid #2d85f0;
  }

  .right_bottom {
    position: absolute;
    z-index: -1;
    bottom: -6vh;
    right: -4vh;
    background-color: #ffbdbd;
    width: 16vh;
    height: 16vh;
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
  }
  .el-dialog {
    position: relative;
    margin: 10vh auto;
    opacity: 0.95;
    width: 65vw;
    height: 75vh;
    border-radius: 2vh;
    .el-dialog__body {
      padding: 0;
    }
    .conbox {
      margin-top: 70px;
      display: flex;
      .dia_left {
        width: 60%;
        .el-form {
          width: 70%;
          button {
            margin-left: 20px;
            margin-top: 30px;
            color: #fff;
            font-weight: 400;
            width: 250px;
            height: 40px;
            background-color: #626aef;
            border: none;
            border-radius: 8px;
            border: #ccc 1px solid;
            outline: none;
            font-size: 18px;
          }
        }
      }
      .dia_right {
        width: 40%;
        height: 100%;
        .circle_box {
          position: absolute;
          bottom: 3px;
          right: 5px;
          width: 225px;
          .one_circle,
          .two_circle,
          .three_circle,
          .four_circle {
            display: inline-block;
            width: 80px;
            margin-right: 5px;
            height: 80px;
            background-color: red;
            border-radius: 50px;
          }
        }
      }
    }
  }
}
</style>